<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <!-- 左边菜单 -->
      <a-menu
        mode="inline"
        :style="{ height: '100%', borderRight: 0 }"
        @click="handleClick"
        :openKeys="openKeys"
      >
        <a-menu-item key="welcome">
          <MailOutlined />
          <span>欢迎</span>
        </a-menu-item>
        <a-sub-menu v-for="item in level1" :key="item.id" :disabled="false">
          <template v-slot:title>
            <span><user-outlined />{{ item.name }}</span>
          </template>
          <a-menu-item v-for="child in item.children" :key="child.id">
            <MailOutlined /><span>{{ child.name }}</span>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="tip" :disabled="false">
          <span>以上菜单在分类管理配置</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px',
      }"
    >
      <div class="welcome" v-show="isShowWelcome">
        <h1>欢迎界面</h1>
      </div>
      <!-- 中间列表 -->
      <a-list
        v-show="!isShowWelcome"
        item-layout="vertical"
        size="large"
        :data-source="ebooks"
        :grid="{ gutter: 20, column: 3 }"
      >
        <template #renderItem="{ item }">
          <a-list-item key="item.name">
            <template #actions>
              <span v-for="{ icon, text } in actions" :key="icon">
                <component :is="icon" style="margin-right: 8px" />
                {{ text }}
              </span>
            </template>

            <a-list-item-meta :description="item.description">
              <template #title>
                <a :href="item.href">{{ item.name }}</a>
              </template>
              <template #avatar><a-avatar :src="item.cover" /></template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from "@ant-design/icons-vue";
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, onMounted, ref, reactive, toRef } from "vue";
import axios from "axios";
import { message } from "ant-design-vue";
import { Tool } from "@/util/tool";
import TheWelcome from "@/components/the-welcome.vue";

const ebooks = ref();
const openKeys = ref();
const level1 = ref();
let categorys: any;

/**
 * 查询所有分类
 **/
const handleQueryCategory = () => {
  axios.get("/category/all").then((response) => {
    const data = response.data;
    if (data.success) {
      categorys = data.content;
      console.log("原始数组：", categorys);

      // 加载完分类后，将侧边栏全部展开
      openKeys.value = [];
      for (let i = 0; i < categorys.length; i++) {
        openKeys.value.push(categorys[i].id);
      }

      level1.value = [];
      level1.value = Tool.array2Tree(categorys, 0);
      console.log("树形结构：", level1.value);
    } else {
      message.error(data.message);
    }
  });
};

const handleQueryEbook = () => {
  axios
    .get("/ebook/list", {
      params: {
        page: 1,
        size: 1000,
        categoryId2: categoryId2,
      },
    })
    .then((response) => {
      const data = response.data;
      ebooks.value = data.content.list;
      // ebooks1.books = data.content;
    });
};

const isShowWelcome = ref(true); // 欢迎页面切换
let categoryId2 = 0; // 分类id传参
const handleClick = (value: any) => {
  // console.log("menu click", value)
  if (value.key === "welcome") {
    isShowWelcome.value = true;
  } else {
    categoryId2 = value.key;
    isShowWelcome.value = false;
    handleQueryEbook();
  }
  // isShowWelcome.value = value.key === 'welcome';
};

axios
  .get("/ebook/list", {
    params: {
      page: 1,
      size: 300,
    },
  })
  .then((response) => {
    ebooks.value = response.data.content.list;
  });

const listData: Record<string, string>[] = [];

for (let i = 0; i < 15; i++) {
  listData.push({
    href: "https://www.antdv.com/",
    title: `ant design vue part ${i}`,
    avatar: "https://joeschmoe.io/api/v1/random",
    description:
      "Ant Design, a design language for background applications, is refined by Ant UED Team.",
    content:
      "We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.",
  });
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const actions: Record<string, any>[] = [
  { icon: StarOutlined, text: "156" },
  { icon: LikeOutlined, text: "156" },
  { icon: MessageOutlined, text: "2" },
];

onMounted(() => {
  handleQueryCategory();
  // handleQueryEbook();
});
</script>

<style scoped>
.ant-avatar {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 8%;
  margin: 5px 0;
}
</style>
